import React, { useState } from 'react';
import { Card, Row, Col, Typography, Space, Button, Divider, Alert } from 'antd';
import { RobotOutlined, AudioOutlined, PlayCircleOutlined, PauseCircleOutlined } from '@ant-design/icons';
import SimpleModelViewer from '../../compages/DigitalHuman';
import AIChatWithAnimation from '../../compages/AIChatWithAnimation';

const { Title, Paragraph, Text } = Typography;

const AIDemo: React.FC = () => {
  const [animation, setAnimation] = useState('idle');
  const [lang, setLang] = useState<'zh' | 'en'>('zh');

  const features = [
    {
      title: '智能语音合成',
      description: 'AI回复时自动播放语音，支持语速、音调、音量调节',
      icon: <AudioOutlined style={{ fontSize: 24, color: '#1890ff' }} />
    },
    {
      title: '3D模型同步',
      description: '语音播放时3D模型自动切换到说话动画，播放结束后恢复待机',
      icon: <RobotOutlined style={{ fontSize: 24, color: '#52c41a' }} />
    },
    {
      title: '动作指令识别',
      description: '支持语音和文字指令控制3D模型动作，如跳舞、哭泣、倒立等',
      icon: <PlayCircleOutlined style={{ fontSize: 24, color: '#faad14' }} />
    },
    {
      title: '实时状态反馈',
      description: '显示当前说话状态，支持手动停止语音播放',
      icon: <PauseCircleOutlined style={{ fontSize: 24, color: '#f5222d' }} />
    }
  ];

  const actionCommands = [
    { command: '跳舞', action: 'dance', description: '让3D模型跳舞' },
    { command: '停止', action: 'idle', description: '让3D模型停止动作' },
    { command: '哭泣', action: 'crying', description: '让3D模型哭泣' },
    { command: '倒立', action: 'breakDance', description: '让3D模型做倒立动作' },
    { command: '说话', action: 'speaking', description: '让3D模型说话' }
  ];

  return (
    <div style={{ padding: '24px', maxWidth: '1200px', margin: '0 auto' }}>
      <Title level={2}>AI聊天与3D模型同步演示</Title>
      <Paragraph>
        这个演示展示了AI回复时3D模型同步说话的功能。当AI回复消息时，系统会自动播放语音，
        同时3D模型会切换到说话动画，语音播放结束后自动恢复待机状态。
      </Paragraph>

      <Alert
        message="功能说明"
        description="点击右下角的🎤按钮打开AI聊天界面，输入问题或动作指令，观察3D模型的同步反应。"
        type="info"
        showIcon
        style={{ marginBottom: '24px' }}
      />

      <Row gutter={[24, 24]}>
        {/* 3D模型展示区域 */}
        <Col span={12}>
          <Card title="3D数字人模型" style={{ height: '600px' }}>
            <div style={{ 
              height: '500px', 
              display: 'flex', 
              alignItems: 'center', 
              justifyContent: 'center',
              background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
              borderRadius: '8px',
              position: 'relative'
            }}>
              <SimpleModelViewer 
                modelPath="/models/girl.glb"
                scale={2.5}
                position={[0, -2, 0]}
                animationName={animation}
                onAnimationChange={setAnimation}
                lang={lang}
              />
              
              {/* 当前动画状态显示 */}
              <div style={{
                position: 'absolute',
                bottom: '16px',
                left: '50%',
                transform: 'translateX(-50%)',
                background: 'rgba(0,0,0,0.7)',
                color: 'white',
                padding: '8px 16px',
                borderRadius: '20px',
                fontSize: '14px'
              }}>
                当前动画: {animation}
              </div>
            </div>
          </Card>
        </Col>

        {/* AI聊天区域 */}
        <Col span={12}>
          <Card title="AI智能助手" style={{ height: '600px' }}>
            <AIChatWithAnimation 
              setAnimation={setAnimation}
              lang={lang}
            />
          </Card>
        </Col>
      </Row>

      <Divider />

      {/* 功能特性 */}
      <Title level={3}>功能特性</Title>
      <Row gutter={[16, 16]}>
        {features.map((feature, index) => (
          <Col span={6} key={index}>
            <Card hoverable style={{ textAlign: 'center' }}>
              <Space direction="vertical" size="middle">
                {feature.icon}
                <div>
                  <Title level={5}>{feature.title}</Title>
                  <Text type="secondary">{feature.description}</Text>
                </div>
              </Space>
            </Card>
          </Col>
        ))}
      </Row>

      <Divider />

      {/* 动作指令说明 */}
      <Title level={3}>支持的动作指令</Title>
      <Paragraph>
        您可以通过语音或文字输入以下指令来控制3D模型的动作：
      </Paragraph>
      
      <Row gutter={[16, 16]}>
        {actionCommands.map((cmd, index) => (
          <Col span={4} key={index}>
            <Card 
              hoverable 
              style={{ textAlign: 'center', cursor: 'pointer' }}
              onClick={() => setAnimation(cmd.action)}
            >
              <Space direction="vertical" size="small">
                <Text strong>{cmd.command}</Text>
                <Text type="secondary" style={{ fontSize: '12px' }}>
                  {cmd.description}
                </Text>
              </Space>
            </Card>
          </Col>
        ))}
      </Row>

      <Divider />

      {/* 使用说明 */}
      <Title level={3}>使用说明</Title>
      <Row gutter={[24, 16]}>
        <Col span={8}>
          <Card title="1. 开始对话" size="small">
            <Paragraph>
              点击AI聊天界面，输入您的问题或指令。支持普通对话和动作指令。
            </Paragraph>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="2. 观察同步" size="small">
            <Paragraph>
              AI回复时，3D模型会自动切换到说话动画，同时播放语音。
            </Paragraph>
          </Card>
        </Col>
        <Col span={8}>
          <Card title="3. 语音设置" size="small">
            <Paragraph>
              点击设置按钮可以调节语速、音调、音量等语音参数。
            </Paragraph>
          </Card>
        </Col>
      </Row>

      <Divider />

      {/* 技术实现 */}
      <Title level={3}>技术实现</Title>
      <Card>
        <Paragraph>
          <strong>核心功能：</strong>
        </Paragraph>
        <ul>
          <li><strong>语音合成 (TTS):</strong> 使用Web Speech API实现文本转语音</li>
          <li><strong>动画同步:</strong> 语音播放时自动切换3D模型动画状态</li>
          <li><strong>状态管理:</strong> 实时跟踪语音播放状态和动画状态</li>
          <li><strong>指令识别:</strong> 智能识别动作指令并执行相应动画</li>
          <li><strong>用户体验:</strong> 提供视觉反馈和状态指示器</li>
        </ul>
        
        <Paragraph>
          <strong>技术栈：</strong>
        </Paragraph>
        <ul>
          <li>React + TypeScript</li>
          <li>Three.js (3D渲染)</li>
          <li>Web Speech API (语音合成)</li>
          <li>Ant Design (UI组件)</li>
          <li>CSS3 (动画效果)</li>
        </ul>
      </Card>

      <Divider />

      {/* 注意事项 */}
      <Alert
        message="注意事项"
        description="
          1. 需要现代浏览器支持Web Speech API
          2. 首次使用可能需要用户授权麦克风权限
          3. 语音播放需要网络连接
          4. 3D模型动画需要WebGL支持
        "
        type="warning"
        showIcon
      />
    </div>
  );
};

export default AIDemo; 